Closes #28

#28
closed

PR: Add Delivery Status Timeline Component

Closes #[issue_id]

📝 Summary

Implemented a visual step-by-step delivery status timeline component displaying the progression of deliveries from Pending → Accepted → In Transit → Delivered/Cancelled. The component follows the strict layered architecture pattern (Component → Hook → Service) with real-time data fetched from the backend API.

🎯 Changes Made

New Files

• features/deliveries/components/StatusTimeline.tsx - Main visual timeline component
• hooks/useStatusTimeline.ts - Custom React hook for timeline data management

Modified Files

• types/delivery.ts - Added StatusEvent, StatusTimeline interfaces and type exports
• services/deliveries.service.ts - Added getStatusTimeline() method

✨ Features

✅ Vertical Timeline - Displays 5 status nodes: Pending → Accepted → In Transit → Delivered → Cancelled
✅ Timestamp Display - Shows exact timestamp next to each status change
✅ Status Accuracy - Properly reflects all backend status enums
✅ Visual Indicators - Color-coded with icons, connecting lines, and current status highlighting
✅ State Management - Clearly marks completed and current steps
✅ Error Handling - Loading, error, and empty states
✅ Strict Architecture - Component → Hook → Service pattern
✅ Backend Integration - Data fetched from /deliveries/{id}/timeline endpoint

🏗️ Architecture

StatusTimeline Component
    ↓ (uses)
useStatusTimeline Hook
    ↓ (calls)
deliveriesService.getStatusTimeline()
    ↓ (fetches from)
Backend API: GET /deliveries/{deliveryId}/timeline

💻 Usage Example

import { StatusTimeline } from '@/features/deliveries/components/StatusTimeline';

export default function DeliveryDetail() {
  return <StatusTimeline deliveryId="delivery-123" />;
}

🧪 Testing Notes

• Component fetches from live backend API (no mock data)
• Handles all status enum values
• Sorts events chronologically
• Displays timestamps in user's local timezone
• Includes loading and error UI states

✅ Acceptance Criteria Met

• Timeline logic accurately reflects backend status enums
• Strict Component → Hook → Service layered architecture
• Data sourced from backend API (no inline mock objects)
• TailwindCSS styling applied
• TypeScript types properly defined

📸 Screenshots

[Insert screenshots showing:

• Timeline component rendering with all status nodes
• Loading state spinner
• Error state message
• Current status highlighted]

Branch: feat/status-timeline